<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .warp{
            height: 300px;
            width: 130px;
            overflow:hidden;
            position: relative;
        }
        .content{
            position: absolute;
            left:0;
            top:0;
            width: 100px;
        }
        .tiao{
            height: 300px;
            background: rgba(0,0,0,.3);
            width: 20px;
            position: absolute;
            right:0;
        }
        .tiao1{
            width: 20px;
            position: absolute;
            top: 0;
            left:0;
            height: 20px;
            background: rgba(0,0,0,.5);
        }
    </style>
</head>
<body>
    <div class='warp'>
        <div class='content'>
            这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容这是自定义内容
        </div>

        <div class="tiao">
            <div class="tiao1"></div>
        </div>
    </div>

    <script>

        var warp = document.getElementsByClassName('warp')[0];
        var content = document.getElementsByClassName('content')[0];
        var tiao = document.getElementsByClassName('tiao')[0];
        var tiao1 = document.getElementsByClassName('tiao1')[0];
        
        //渲染tiao1高度
        let contentHeight = content.scrollHeight;
        let tiaoHeight = tiao.offsetHeight;
        let bili = (contentHeight - tiaoHeight) / 30;
        if(bili >= 30){
            bili = 29;
        }
        let tiao1Height = (30 - bili) * 10;
        tiao1.style.height = tiao1Height + 'px';

        //鼠标滚动条
        warp.onmousewheel = function(e){
            if(e.wheelDelta > 0 ){
                //向上
                let Top = content.offsetTop;
                let newTop = Top + 15;
                if(newTop >= 0){
                    newTop = 0;
                }
                content.style.top = newTop + 'px';
                let bili2 = content.offsetTop / (contentHeight - tiaoHeight);
                tiao1.style.top = (-tiaoHeight + tiao1Height) * bili2 + 'px';
            }else{
                //向下
                let Top = content.offsetTop;
                let newTop = Top - 15;
                if(newTop <= - (contentHeight - tiaoHeight)){
                    newTop = - (contentHeight - tiaoHeight);
                }
                content.style.top = newTop + 'px';
                let bili2 = newTop / (contentHeight - tiaoHeight);
                tiao1.style.top = (-tiaoHeight + tiao1Height) * bili2 + 'px';
            }
        }

        //进度条点击
        tiao.onclick = function(e){
            let Top = e.offsetY;
            if(Top + tiao1Height > tiaoHeight){
                Top = tiaoHeight - tiao1Height;
            }
            tiao1.style.top = Top + 'px';
            let bili3 = Top / (-tiaoHeight + tiao1Height);
            let cTop = (contentHeight -tiaoHeight) * bili3;
            content.style.top = cTop + 'px';
        }

        tiao1.onclick = function(e){
            e.stopPropagation();
        }

        //进度条拖动
        tiao1.onmousedown = function(e){
            let duang = e.clientY;
            let tTop = tiao1.offsetTop;
            document.onmousemove = function(e){
                e.preventDefault();
                let Top = tTop +  e.clientY - duang;
                if(Top <= 0){
                    Top = 0;
                }
                if(Top > tiaoHeight - tiao1Height){
                    Top = tiaoHeight - tiao1Height;
                }
                tiao1.style.top = Top + 'px';

                let bili4 = Top / (-tiaoHeight + tiao1Height);
                let cTop = (contentHeight -tiaoHeight) * bili4;
                content.style.top = cTop + 'px';
            }
            document.onmouseup = function(){
                document.onmousemove = null;
            }
        }
    </script>
</body>
</html>